<script setup>
import { ref } from 'vue';
import { RouterLink, useRouter } from 'vue-router';
import TheNavBar from '../components/TheNavBar.vue';

const router = useRouter();

// 模拟数据 - 各地特色美食
const foods = [
  {
    id: 1,
    name: '肉夹馍',
    region: '西安',
    description: '西安特色小吃，外酥里嫩，香气四溢',
    image: '/src/assets/肉夹馍.webp',
    popularity: 2536,
    collected: false
  },
  {
    id: 2,
    name: '羊肉泡馍',
    region: '西安',
    description: '西安传统美食，汤鲜味美，营养丰富',
    image: '/src/assets/羊肉泡馍.webp',
    popularity: 1890,
    collected: false
  },
  {
    id: 3,
    name: '铁锅炖',
    region: '东北',
    description: '东北特色，食材丰富，味道浓郁',
    image: '/src/assets/铁锅炖.jpg',
    popularity: 1678,
    collected: false
  },
  {
    id: 4,
    name: '地三鲜',
    region: '东北',
    description: '东北经典素菜，口感丰富，色泽诱人',
    image: '/src/assets/地三鲜.webp',
    popularity: 1456,
    collected: false
  },
  {
    id: 5,
    name: '锅包肉',
    region: '东北',
    description: '东北名菜，外酥里嫩，酸甜可口',
    image: '/src/assets/锅包肉.webp',
    popularity: 2134,
    collected: false
  },
  {
    id: 6,
    name: '辣子鸡',
    region: '枣庄',
    description: '枣庄特色，麻辣鲜香，回味无穷',
    image: '/src/assets/辣子鸡.webp',
    popularity: 1789,
    collected: false
  },
  {
    id: 7,
    name: '菜煎饼',
    region: '枣庄',
    description: '枣庄传统小吃，香脆可口，营养均衡',
    image: '/src/assets/菜煎饼.png',
    popularity: 1245,
    collected: false
  },
  {
    id: 8,
    name: '响油鳝丝',
    region: '上海',
    description: '上海名菜，鲜嫩爽滑，香气扑鼻',
    image: '/src/assets/响油鳝丝.webp',
    popularity: 1987,
    collected: false
  },
  {
    id: 9,
    name: '葱油拌面',
    region: '上海',
    description: '上海传统面食，葱香浓郁，简单美味',
    image: '/src/assets/葱油拌面.webp',
    popularity: 2345,
    collected: false
  },
  {
    id: 10,
    name: '早茶',
    region: '广东',
    description: '广东特色，品种丰富，精致美味',
    image: '/src/assets/早茶.webp',
    popularity: 2789,
    collected: false
  },
  {
    id: 11,
    name: '双酿团',
    region: '南京',
    description: '南京传统甜点，口感丰富，甜而不腻',
    image: '/src/assets/雪梅娘.webp',
    popularity: 1567,
    collected: false
  },
  {
    id: 12,
    name: '北京烤鸭',
    region: '北京',
    description: '北京名菜，皮脆肉嫩，享誉中外',
    image: '/src/assets/北京烤鸭.webp',
    popularity: 3245,
    collected: false
  },
  {
    id: 13,
    name: '奶茶',
    region: '内蒙古',
    description: '内蒙古特色饮品，奶香浓郁，回味无穷',
    image: '/src/assets/奶茶.webp',
    popularity: 1876,
    collected: false
  },
  {
    id: 14,
    name: '奶皮子',
    region: '新疆',
    description: '新疆特色奶制品，营养丰富，口感独特',
    image: '/src/assets/奶皮子.webp',
    popularity: 1432,
    collected: false
  },
  {
    id: 15,
    name: '酸奶疙瘩',
    region: '新疆',
    description: '新疆传统奶制品，酸香可口，风味独特',
    image: '/src/assets/酸奶疙瘩.webp',
    popularity: 1234,
    collected: false
  },
  {
    id: 16,
    name: '哈密瓜',
    region: '新疆',
    description: '新疆特产水果，香甜多汁，清爽解渴',
    image: '/src/assets/哈密瓜.webp',
    popularity: 2134,
    collected: false
  }
];

// 搜索关键词
const searchQuery = ref('');

// 筛选后的美食列表
const filteredFoods = ref(foods);

// 地区筛选器
const selectedRegion = ref('全部');

// 获取所有地区列表（去重）
const regions = ref(['全部', ...Array.from(new Set(foods.map(food => food.region)))]);

// 收藏/取消收藏美食
const toggleCollect = (id) => {
  const food = foods.find(f => f.id === id);
  if (food) {
    food.collected = !food.collected;
  }
};

// 搜索功能
const handleSearch = () => {
  const query = searchQuery.value.toLowerCase().trim();
  const region = selectedRegion.value;
  
  filteredFoods.value = foods.filter(food => {
    const matchesSearch = food.name.toLowerCase().includes(query) || 
                         food.description.toLowerCase().includes(query);
    const matchesRegion = region === '全部' || food.region === region;
    
    return matchesSearch && matchesRegion;
  });
};

// 监听搜索框变化
const updateSearch = () => {
  handleSearch();
};

// 监听地区筛选变化
const updateRegion = () => {
  handleSearch();
};

// 初始化筛选
filteredFoods.value = foods;
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-amber-50 to-orange-50 font-sans w-full">
    <!-- 使用导航栏组件 -->
    <TheNavBar />
    
    <!-- 搜索栏 -->
    <div class="z-20">
      <div class="container mx-auto px-4 py-3 flex justify-center">
        <div class="relative flex-grow max-w-xl">
          <input 
            v-model="searchQuery"
            @input="updateSearch"
            @keyup.enter="handleSearch"
            type="text" 
            placeholder="搜索特色美食..." 
            class="w-full pl-10 pr-12 py-2 rounded-full border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-all outline-none shadow-sm"
          >
          <i class="fa fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          <button @click="handleSearch" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-primary hover:text-primary/80 transition-colors">
            <i class="fa fa-search text-lg"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="w-full px-4 py-6">
      <!-- 欢迎语 -->
      <div class="mb-8 text-center relative">
        <button 
          @click="router.push('/log')"
          class="absolute left-4 top-0 bg-primary text-white px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 hover:bg-primary/90 z-10"
        >
          <i class="fa fa-arrow-left mr-1"></i> 返回首页
        </button>
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-dark mb-2">探索各地特色美食</h1>
        <p class="text-gray-600 text-lg">一场舌尖上的旅行</p>
      </div>

      <!-- 地区筛选 -->
      <div class="mb-8 bg-white rounded-xl shadow-md p-4 overflow-x-auto">
        <div class="flex space-x-2 min-w-max">
          <button 
            v-for="region in regions" 
            :key="region"
            :class="[
              'px-4 py-2 rounded-full text-sm font-medium transition-all duration-300',
              selectedRegion === region 
                ? 'bg-primary text-white' 
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            ]"
            @click="selectedRegion = region; updateRegion()"
          >
            {{ region }}
          </button>
        </div>
      </div>

      <!-- 美食列表 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
        <div 
          v-for="food in filteredFoods" 
          :key="food.id"
          class="bg-white rounded-xl shadow-md overflow-hidden hover-scale transition-all duration-300"
        >
          <div class="relative h-48">
            <img :src="food.image" :alt="food.name" class="w-full h-full object-cover">
            <div class="absolute top-3 left-3 bg-primary text-white px-3 py-1 rounded-full text-sm font-bold">
              {{ food.region }}
            </div>
            <div 
              class="absolute top-3 right-3 p-2 rounded-full cursor-pointer transition-all duration-300"
              :class="food.collected ? 'bg-white text-red-500' : 'bg-white/70 text-gray-500 hover:bg-white'"
              @click="toggleCollect(food.id)"
            >
              <i :class="food.collected ? 'fa fa-heart' : 'fa fa-heart-o'" class="text-xl"></i>
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-xl font-bold text-dark mb-1">{{ food.name }}</h3>
            <p class="text-gray-600 text-sm mb-3 line-clamp-2">{{ food.description }}</p>
            <div class="flex justify-between items-center">
              <div class="flex items-center text-amber-500">
                <i class="fa fa-star mr-1"></i>
                <span class="text-sm text-gray-700">{{ food.popularity }} 人喜欢</span>
              </div>
              <button class="text-primary hover:text-primary/80 text-sm font-medium">
                查看详情 <i class="fa fa-angle-right ml-1"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 搜索结果为空提示 -->
      <div v-if="filteredFoods.length === 0" class="text-center py-12 bg-white rounded-xl shadow-md">
        <i class="fa fa-search text-5xl text-gray-300 mb-4"></i>
        <h3 class="text-xl font-bold text-gray-700 mb-2">未找到相关美食</h3>
        <p class="text-gray-500">请尝试其他关键词或地区</p>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-10">
      <div class="w-full px-4 text-center">
        <p class="mb-4"><i class="fa fa-cutlery mr-2"></i>美食推荐 - 探索各地风味</p>
        <p class="text-gray-400 text-sm">© 2023 美食推荐. 保留所有权利.</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
:root {
  --primary: #FF7A45; /* 活力橙 */
  --secondary: #40A9FF; /* 清新蓝 */
  --tertiary: #52C41A; /* 生机绿 */
  --dark: #1F2937;
  --light: #F9FAFB;
}

.hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-scale:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.text-primary {
  color: var(--primary);
}

.bg-primary {
  background-color: var(--primary);
}

.text-dark {
  color: var(--dark);
}

.text-gray-600 {
  color: #4B5563;
}

.text-gray-700 {
  color: #374151;
}

.text-gray-500 {
  color: #6B7280;
}

.text-gray-300 {
  color: #D1D5DB;
}

.text-amber-500 {
  color: #F59E0B;
}

.text-red-500 {
  color: #EF4444;
}

.bg-amber-50 {
  background-color: #FEF3C7;
}

.bg-orange-50 {
  background-color: #FFF7ED;
}

.bg-gray-100 {
  background-color: #F3F4F6;
}

.bg-gray-200 {
  background-color: #E5E7EB;
}

.bg-white {
  background-color: #FFFFFF;
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.min-w-max {
  min-width: max-content;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .grid-cols-2,
  .lg\:grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  .nav .flex-grow {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: 1fr 1fr;
  }
}
</style>

<style>
/* 全局样式 */
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');

/* 修复移动端底部安全区域 */
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
</style>